<template>
  <FormContainer :column="4">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
      <el-form-item prop="mscCustomerCode" label="MSC客户编码">
        <el-input v-model="formData.mscCustomerCode" placeholder="请输入MSC客户编码" clearable disabled></el-input>
      </el-form-item>
      <el-form-item prop="mscCustomerName" label="MSC客户名称">
        <el-input v-model="formData.mscCustomerName" placeholder="请输入MSC客户名称" clearable disabled></el-input>
      </el-form-item>
      <!-- <el-form-item prop="officeCode" label="办事处">
        <el-input v-model="formData.officeCode" placeholder="请输入办事处" clearable disabled></el-input>
      </el-form-item> -->
      <el-form-item prop="officeCode" label="办事处">
        <SearchSelectPicker
          url="/call-center/api/v1/mscInfo/office/ref/page"
          placeholder="请选择办事处"
          lable-name="name"
          value-name="code"
          method="get"
          :value.sync="formData.officeCode"
          :lable.sync="formData.officeName"
        ></SearchSelectPicker>
      </el-form-item>
      <el-form-item prop="legalPerson" label="经销商法人">
        <el-input v-model="formData.legalPerson" placeholder="请输入经销商法人" clearable disabled></el-input>
      </el-form-item>
      <el-form-item prop="credentialNo" label="法人身份证号">
        <el-input v-model="formData.credentialNo" placeholder="请输入法人身份证号" clearable disabled></el-input>
      </el-form-item>
      <el-form-item prop="businessModel" label="经营模式">
        <!-- <el-input v-model="formData.businessModel" placeholder="请选择经营模式" clearable></el-input> -->
        <SelectForDict :code.sync="formData.businessModel" dict-type-code="KQ_BUSINESS_MODEL" placeholder="请选择经营模式"></SelectForDict>
      </el-form-item>
      <el-form-item prop="workingYears" label="从业年限">
        <el-input v-model="formData.workingYears" number placeholder="请输入从业年限" clearable></el-input>
      </el-form-item>
      <el-form-item prop="joiningDate" label="加盟日期">
        <el-date-picker v-model="formData.joiningDate" type="date" placeholder="选择加盟日期" clearable></el-date-picker>
      </el-form-item>
      <el-form-item prop="openingDate" label="开业日期">
        <el-date-picker v-model="formData.openingDate" type="date" placeholder="选择开业日期" clearable></el-date-picker>
      </el-form-item>
      <el-form-item prop="customerName" label="客户姓名">
        <el-input v-model="formData.customerName" placeholder="请输入客户姓名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="customerPhone" label="客户电话">
        <el-input v-model="formData.customerPhone" number placeholder="请输入客户电话" clearable></el-input>
      </el-form-item>
      <el-form-item prop="customerPhoneBackup" label="客户备用电话">
        <el-input v-model="formData.customerPhoneBackup" number placeholder="请输入客户备用电话" clearable></el-input>
      </el-form-item>
      <el-form-item prop="customerLevel" label="客户级别">
        <!-- <el-select v-model="formData.customerLevel" placeholder="请选择客户级别" clearable filterable @change="v=>getName(v,levelList,'customerLevelName')">
          <el-option v-for="(l,i) in levelList" :key="i" :label="l.label" :value="l.value" />
        </el-select> -->
        <CustomDictSelect
          placeholder="请选择客户级别"
          dict-type-code="KQ_CUSTOMER_LEVEL"
          bind-name="dictName"
          bind-value="dictCode"
          :echo-value.sync="formData.customerLevel"
          :echo-name.sync="formData.customerLevelName"
          clearable
        ></CustomDictSelect>
      </el-form-item>
      <el-form-item prop="birthday" label="客户生日">
        <CalendarPickerPane v-model="formData.birthday" :type.sync="formData.birthdayType" placeholder="请选择客户生日"></CalendarPickerPane>
      </el-form-item>
      <el-form-item prop="birthdayType" label="客户生日类型">
        <el-select v-model="formData.birthdayType" placeholder="请选择客户生日类型" clearable filterable disabled>
          <el-option value="solar" label="公历"></el-option>
          <el-option value="lunar" label="农历"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="gender" label="性别">
        <el-select v-model="formData.gender" placeholder="请选择性别" clearable filterable @change="v=>getName(v,genderList,'genderName')">
          <el-option v-for="(m,i) in genderList" :key="i" :label="m.label" :value="m.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="nation" label="民族">
        <el-input v-model="formData.nation" placeholder="请输入民族" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item prop="nativePlaceArr" label="籍贯">
        <NativePlace v-model="formData.nativePlaceArr" :label.sync="formData.nativePlaceNameArr" placeholder="请选择籍贯" clearable></NativePlace>
      </el-form-item> -->
      <el-form-item prop="nativePlace" label="籍贯">
        <el-input v-model="formData.nativePlace" placeholder="请输入籍贯" clearable></el-input>
      </el-form-item>
      <el-form-item prop="educationalLevel" label="文化程度">
        <!-- <el-select v-model="formData.educationalLevel" placeholder="请选择文化程度" clearable filterable @change="v=>getName(v,educationOp,'educationalLevelName')">
          <el-option
            v-for="(list, index) in educationOp"
            :key="index"
            :label="list.label"
            :value="list.value"
          />
        </el-select> -->
        <CustomDictSelect
          placeholder="请选择文化程度"
          dict-type-code="KQ_EDUCATION_DEGREE"
          bind-name="dictName"
          bind-value="dictCode"
          :echo-value.sync="formData.educationalLevel"
          :echo-name.sync="formData.educationalLevelName"
          clearable
        ></CustomDictSelect>
      </el-form-item>
      <el-form-item prop="hobby" label="兴趣爱好">
        <el-input v-model="formData.hobby" placeholder="请输入兴趣爱好" clearable></el-input>
      </el-form-item>
      <el-form-item prop="maritalStatus" label="婚姻状态">
        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状态" clearable filterable @change="v=>getName(v,maritalStatusList,'maritalStatusName')">
          <el-option v-for="(m,i) in maritalStatusList" :key="i" :label="m.label" :value="m.value" />
        </el-select>
      </el-form-item>
      <template v-if="formData.maritalStatus!==0">
        <el-form-item prop="weddingDay" label="结婚纪念日">
          <CalendarPickerPane v-model="formData.weddingDay" :type.sync="formData.weddingDayType" placeholder="请选择结婚纪念日"></CalendarPickerPane>
        </el-form-item>
        <el-form-item prop="weddingDayType" label="结婚纪念日类型">
          <el-select v-model="formData.weddingDayType" placeholder="请选择结婚纪念日类型" clearable filterable disabled>
            <el-option value="solar" label="公历"></el-option>
            <el-option value="lunar" label="农历"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="spouseName" label="配偶姓名">
          <el-input v-model="formData.spouseName" placeholder="请输入配偶姓名" clearable></el-input>
        </el-form-item>
        <el-form-item prop="spousePhone" label="配偶电话">
          <el-input v-model="formData.spousePhone" number placeholder="请输入配偶电话" clearable></el-input>
        </el-form-item>
        <el-form-item prop="spouseBirthday" label="配偶生日">
          <CalendarPickerPane v-model="formData.spouseBirthday" :type.sync="formData.spouseBirthdayType" placeholder="请选择配偶生日"></CalendarPickerPane>
        </el-form-item>
        <el-form-item prop="spouseBirthdayType" label="配偶生日类型">
          <el-select v-model="formData.spouseBirthdayType" placeholder="请选择配偶生日类型" clearable filterable disabled>
            <el-option value="solar" label="公历"></el-option>
            <el-option value="lunar" label="农历"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="spouseNation" label="配偶民族">
          <el-input v-model="formData.spouseNation" placeholder="请输入配偶民族" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item prop="spouseNationPlaceArr" label="配偶籍贯">
          <NativePlace v-model="formData.spouseNationPlaceArr" :label.sync="formData.spouseNationPlaceNameArr" placeholder="请选择籍贯" clearable></NativePlace>
        </el-form-item> -->
        <el-form-item prop="spouseNativePlace" label="配偶籍贯">
          <el-input v-model="formData.spouseNativePlace" placeholder="请输入配偶籍贯" clearable></el-input>
        </el-form-item>
        <el-form-item prop="spouseEducationalLevel" label="配偶文化程度">
          <!-- <el-select v-model="formData.spouseEducationalLevel" placeholder="请选择文化程度" clearable filterable @change="v=>getName(v,educationOp,'spouseEducationalLevelName')">
            <el-option
              v-for="(list, index) in educationOp"
              :key="index"
              :label="list.label"
              :value="list.value"
            />
          </el-select> -->
          <CustomDictSelect
            placeholder="请选择文化程度"
            dict-type-code="KQ_EDUCATION_DEGREE"
            bind-name="dictName"
            bind-value="dictCode"
            :echo-value.sync="formData.spouseEducationalLevel"
            :echo-name.sync="formData.spouseEducationalLevelName"
            clearable
          ></CustomDictSelect>
        </el-form-item>
        <el-form-item prop="spouseHobby" label="配偶兴趣爱好">
          <el-input v-model="formData.spouseHobby" placeholder="请输入配偶兴趣爱好" clearable></el-input>
        </el-form-item>
      </template>
      <el-form-item prop="handler" label="分配坐席">
        <StaffSearch v-model="formData.handler" :name.sync="formData.handlerName" placeholder="请选择分配坐席" clearable></StaffSearch>
      </el-form-item>
      <el-form-item prop="defaultAddress" label="默认收货地址" :span="24">
        <el-input v-model="formData.defaultAddress" placeholder="请输入默认收货地址" type="textarea" :autosize="{minRows:1}" clearable disabled></el-input>
      </el-form-item>
      <!-- <el-form-item prop="province" label="客情收货地址">
        <Address v-model="formData.province" :name.sync="formData.provinceName" label="省" init placeholder="请选择省" clearable filterable></Address>
      </el-form-item>
      <el-form-item prop="city" label="市">
        <Address v-model="formData.city" :name.sync="formData.cityName" :parent="formData.province" placeholder="请选择市" clearable filterable></Address>
      </el-form-item>
      <el-form-item prop="county" label="区/县">
        <Address v-model="formData.county" :name.sync="formData.countyName" :parent="formData.city" placeholder="请选择区/县" clearable filterable></Address>
      </el-form-item>
      <el-form-item prop="street" label="街道">
        <Address v-model="formData.street" :name.sync="formData.streetName" :parent="formData.county" placeholder="请选择街道" clearable filterable></Address>
      </el-form-item> -->
      <!-- <el-form-item prop="detailAddress" label="详细地址" :span="24">
        <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" type="textarea" :autosize="{minRows:1}" clearable></el-input>
      </el-form-item> -->
      <el-form-item prop="detailAddress" label="客情收货地址" :span="24">
        <el-input v-model="formData.detailAddress" placeholder="请输入客情收货地址" type="textarea" :autosize="{minRows:1}" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="$route.query.type!=='preview'" :span="24">
        <div class="button-container" style="padding-top: 0">
          <Button @click="resetForm">重置</Button>
          <Button type="primary" @click="submitHandle">保存</Button>
        </div>
      </el-form-item>
    </el-form>
  </FormContainer>
</template>
<script>
import FormContainer from '@/components/FormContainer'
// import Address from '@/components/Address'
// import NativePlace from '@/components/NativePlace'
import StaffSearch from '@/components/StaffSearch'
import SelectForDict from '@/components/SelectForDict'
import CalendarPickerPane from '@/components/CalendarPickerPane'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import CustomDictSelect from '@/components/CustomDictSelect'
import { deepCopy, parseTime } from '@/utils'
import { careCustomerAdd } from '@/api/guestCare'
export default {
  name: 'CInput',
  components: {
    FormContainer,
    // Address,
    StaffSearch,
    // NativePlace,
    SelectForDict,
    CalendarPickerPane,
    SearchSelectPicker,
    CustomDictSelect
  },
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    defaultAddress: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        birthday: '', //	生日
        birthdayType: '',	// 生日类型1：公历2：农历
        birthdayTypeName: '',	// 生日类型1：公历2：农历
        businessModel: '', // 经营模式
        businessStatus: '', // 经营状态
        businessTypeCode: '', // 经营范围
        businessTypeName: '', // 经营范围名称
        city: '', // 市
        cityName: '', // 市
        county: '', // 区县
        countyName: '', // 区县
        // createBy: '', // 创建人
        // createByName: '', // 创建人姓名
        credentialNo: '', //	证件号码
        customerLevel: '', //	客户级别
        customerLevelName: '', //	客户级别
        customerName: '', // 客户姓名
        customerPhone: '', //	客户电话
        customerPhoneBackup: '', // 备用电话
        defaultAddress: '', // 默认地址
        detailAddress: '', // 详细地址
        educationalLevel: '', //	文化程度1博士2硕士3本科4大专5中专6高中7初中8小学
        educationalLevelName: '', // 文化程度名称
        gender: '', //	性别1男2女
        genderName: '', // 性别名称
        handler: '', // 处理人账号
        handlerName: '', // 处理人姓名
        hobby: '', // 兴趣爱好
        id: '', //	关怀客户信息ID
        joiningDate: '', // 加盟日期
        // lastUpdateBy: '', // 最后修改人
        // lastUpdateByName: '', // 最后修改人姓名
        // lastUpdateTime: '', // 最后修改时间
        legalPerson: '', // 经销商姓名
        maritalStatus: '', // 婚姻状态1:未婚2：已婚 3离婚 4再婚
        maritalStatusName: '', // 婚姻状态名称
        nation: '', // 民族
        nativePlaceArr: [],
        nativePlaceNameArr: [],
        nativePlace: '', // 文本籍贯
        officeCode: '', // 办事处编码
        officeName: '', // 办事处
        openingDate: '', // 开业日期
        province: '', // 省
        provinceName: '', // 省
        // reviserName: '', // 修改人姓名
        mscCustomerCode: '', // msc编码
        mscCustomerName: '', // msc名称
        spouseBirthday: '', // 配偶生日
        spouseBirthdayType: '', // 配偶生日类型1：公历2：农历
        spouseBirthdayTypeName: '', // 配偶生日类型名称
        // spouseCity: '', // 市
        // spouseCityName: '', // 市名
        // spouseCounty: '', //	区县
        // spouseCountyName: '', // 区县名
        spouseEducationalLevel: '', // 配偶文化程度1博士2硕士3本科4大专5中专6高中7初中8小学
        spouseEducationalLevelName: '', // 配偶文化程度
        spouseHobby: '', // 配偶兴趣爱好
        spouseName: '', // 配偶姓名
        spouseNation: '', // 配偶民族
        spouseNationPlaceArr: [], // 配偶籍贯
        spouseNationPlaceNameArr: [], // 配偶籍贯
        spouseNativePlace: '', // 文本籍贯
        spousePhone: '', // 配偶电话
        // spouseProvince: '', // 省
        // spouseProvinceName: '', // 省名
        // status: '', // 启用状态
        street: '', // 街道
        streetName: '',	// 街道
        weddingDay: '', // 结婚纪念日
        weddingDayType: '', // 结婚纪念日类型1：公历2：农历
        weddingDayTypeName: '', // 结婚纪念日
        workingYears: ''// 从业年限/工龄
      },
      formRules: {},
      // 文化程度
      educationOp: [
        { label: '博士', value: 1 },
        { label: '硕士', value: 2 },
        { label: '本科', value: 3 },
        { label: '大专', value: 4 },
        { label: '中专', value: 5 },
        { label: '高中', value: 6 },
        { label: '初中', value: 7 },
        { label: '小学', value: 8 }
      ],
      // 级别
      levelList: [
        {
          value: 1,
          label: '普通客户'
        },
        {
          value: 2,
          label: 'VIP客户'
        }
      ],
      // 婚姻状态
      maritalStatusList: [
        {
          value: '1',
          label: '未婚'
        },
        {
          value: '2',
          label: '已婚'
        },
        {
          value: '3',
          label: '离异'
        },
        {
          value: '4',
          label: '再婚'
        }
      ],
      genderList: [
        {
          value: '1',
          label: '男'
        },
        {
          value: '2',
          label: '女'
        }
      ]
    }
  },
  watch: {
    detail: {
      handler: 'initData',
      immediate: true
    },
    defaultAddress: {
      handler() {
        this.$set(this.formData, 'defaultAddress', this.defaultAddress)
      },
      immediate: true
    }
  },
  created() {
    const { mscCustomerCode, mscCustomerName, credentialNo, legalPerson, id } = this.$route.query
    this.$set(this.formData, 'mscCustomerCode', mscCustomerCode || '')
    this.$set(this.formData, 'mscCustomerName', mscCustomerName || '')
    this.$set(this.formData, 'credentialNo', credentialNo || '')
    this.$set(this.formData, 'legalPerson', legalPerson || '')
    this.$set(this.formData, 'id', id || '')
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.formData.spouseNationPlaceNameArr = []
      this.formData.nativePlaceNameArr = []
      this.initData()
    },
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        // 客户籍贯
        if (data.nativePlaceArr && data.nativePlaceArr.length > 0) {
          const nativePlaceArr = data.nativePlaceArr
          const nativePlaceNameArr = data.nativePlaceNameArr
          data.nativePlaceCity = nativePlaceArr[1]// 籍贯市
          data.nativePlaceCityName = nativePlaceNameArr[1] // 籍贯市名
          data.nativePlaceCounty = nativePlaceArr[2] // 籍贯区县
          data.nativePlaceCountyName = nativePlaceNameArr[2] // 籍贯区县名
          data.nativePlaceProvince = nativePlaceArr[0] // 籍贯省
          data.nativePlaceProvinceName = nativePlaceNameArr[0] // 籍贯省名
        }
        delete data.nativePlaceArr
        delete data.nativePlaceNameArr
        // 客户配偶籍贯
        if (data.spouseNationPlaceArr && data.spouseNationPlaceArr.length > 0) {
          const spouseNationPlaceArr = data.spouseNationPlaceArr
          const spouseNationPlaceNameArr = data.spouseNationPlaceNameArr
          data.spouseCity = spouseNationPlaceArr[1]// 籍贯市
          data.spouseCityName = spouseNationPlaceNameArr[1] // 籍贯市名
          data.spouseCounty = spouseNationPlaceArr[2] // 籍贯区县
          data.spouseCountyName = spouseNationPlaceNameArr[2] // 籍贯区县名
          data.spouseProvince = spouseNationPlaceArr[0] // 籍贯省
          data.spouseProvinceName = spouseNationPlaceNameArr[0] // 籍贯省名
        }
        delete data.spouseNationPlaceArr
        delete data.spouseNationPlaceNameArr
        // 生日处理
        // 客户生日
        if (data.birthday) {
          if (data.birthdayType === 'solar') {
            data.birthdayType = 1
            data.birthdayTypeName = '公历'
          } else {
            data.birthdayType = 2
            data.birthdayTypeName = '农历'
          }
        } else {
          data.birthdayType = ''
          data.birthdayTypeName = ''
        }
        // 客户配偶生日
        if (data.spouseBirthday) {
          if (data.spouseBirthdayType === 'solar') {
            data.spouseBirthdayType = 1
            data.spouseBirthdayTypeName = '公历'
          } else {
            data.spouseBirthdayType = 2
            data.spouseBirthdayTypeName = '农历'
          }
        } else {
          data.spouseBirthdayType = ''
          data.spouseBirthdayTypeName = ''
        }
        // 结婚纪念日
        if (data.weddingDay) {
          if (data.weddingDayType === 'solar') {
            data.weddingDayType = 1
            data.weddingDayTypeName = '公历'
          } else {
            data.weddingDayType = 2
            data.weddingDayTypeName = '农历'
          }
        } else {
          data.weddingDayType = ''
          data.weddingDayTypeName = ''
        }
        // 时间处理
        if (data.openingDate) {
          data.openingDate = parseTime(data.openingDate, `{y}-{m}-{d}`)
        }
        if (data.joiningDate) {
          data.joiningDate = parseTime(data.joiningDate, `{y}-{m}-{d}`)
        }
        return careCustomerAdd(data).then(res => {
          this.$message.success('保存成功！')
          this.$closePage()
        })
      })
    },
    // 初始化数据
    initData() {
      if (Object.keys(this.detail).length > 0) {
        for (const key of Object.keys(this.formData)) {
          if (this.detail[key] === undefined || this.detail[key] === '' || this.detail[key] === null) {
            continue
          }
          // 农历处理
          if (key === 'spouseBirthdayType' || key === 'birthdayType' || key === 'weddingDayType') {
            this.$set(this.formData, key, this.detail[key] === 1 || this.detail[key] === '1' ? 'solar' : 'lunar')
            continue
          }
          // 默认地址处理
          if (key === 'defaultAddress' && this.defaultAddress !== '') {
            this.$set(this.formData, key, this.defaultAddress)
            continue
          }
          // 时间处理
          if (key === 'openingDate' || key === 'joiningDate') {
            this.$set(this.formData, key, new Date(this.detail[key]))
            continue
          }
          // 公历农历处理
          // if (key === 'spouseBirthday' || key === 'birthday' || key === 'weddingDay') {
          //   const ty = this.detail[`${key}Type`]
          //   if (ty === 1 || ty === '1' || ty === 'solar') {
          //     this.$set(this.formData, key, ls(this.detail[key], 'solar'))
          //   } else if (ty === 2 || ty === '2' || ty === 'lunar') {
          //     this.$set(this.formData, key, ls(this.detail[key], 'lunar'))
          //   }
          //   continue
          // }
          let v = this.detail[key]
          v = this.$numToString(v)
          if (v === undefined || v === null) {
            if (this.formData[key] instanceof Array) {
              v = []
            } else {
              v = ''
            }
          }
          this.$set(this.formData, key, v)
        }
        // 籍贯处理
        const d = this.detail
        // 客户籍贯
        const nativePlaceArr = [d.nativePlaceProvince, d.nativePlaceCity, d.nativePlaceCounty]
        const nativePlaceNameArr = [d.nativePlaceProvinceName, d.nativePlaceCityName, d.nativePlaceCountyName]
        if (nativePlaceArr.every(e => e !== undefined)) {
          this.$set(this.formData, 'nativePlaceArr', nativePlaceArr)
          this.$set(this.formData, 'nativePlaceNameArr', nativePlaceNameArr)
        }
        // 配偶籍贯
        const spouseNationPlaceArr = [d.spouseProvince, d.spouseCity, d.spouseCounty]
        const spouseNationPlaceNameArr = [d.spouseProvinceName, d.spouseCityName, d.spouseCountyName]
        if (spouseNationPlaceArr.every(e => e !== undefined)) {
          this.$set(this.formData, 'spouseNationPlaceArr', spouseNationPlaceArr)
          this.$set(this.formData, 'spouseNationPlaceNameArr', spouseNationPlaceNameArr)
        }
      }
    },
    // 获取名称
    getName(v, data, key) {
      let t = ''
      for (const item of data) {
        if (item.value === v) {
          t = item.label
          break
        }
      }
      this.$set(this.formData, key, t)
    }
  }
}
</script>
<style lang='scss' module>
</style>
